<template>
  <div class="teaching-tools">
    <div class="page-header">
      <h1 class="page-title">教具库</h1>
      <p class="page-desc">探索丰富的教学资源和工具，提升您的学习体验</p>
    </div>

    <div class="tools-section">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12">
          <div class="tool-card" @click="$router.push('/materials')">
            <div class="tool-icon">
              <i class="el-icon-document"></i>
            </div>
            <div class="tool-content">
              <h2 class="tool-title">学习资料</h2>
              <p class="tool-desc">浏览和下载各类学习资料，包括课程讲义、习题集、参考书目等</p>
              <div class="tool-stats">
                <div class="stat-item">
                  <span class="stat-value">{{ materialStats.total }}</span>
                  <span class="stat-label">资料总数</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ materialStats.newCount }}</span>
                  <span class="stat-label">本周新增</span>
                </div>
              </div>
              <el-button type="primary">进入学习资料</el-button>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12">
          <div class="tool-card" @click="$router.push('/exams')">
            <div class="tool-icon">
              <i class="el-icon-edit-outline"></i>
            </div>
            <div class="tool-content">
              <h2 class="tool-title">我的考试</h2>
              <p class="tool-desc">查看和参加各类考试、测验，及时了解自己的学习进度和成绩</p>
              <div class="tool-stats">
                <div class="stat-item">
                  <span class="stat-value">{{ examStats.upcoming }}</span>
                  <span class="stat-label">即将到来</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ examStats.completed }}</span>
                  <span class="stat-label">已完成</span>
                </div>
              </div>
              <el-button type="primary">进入我的考试</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="recent-section">
      <div class="section-header">
        <h2 class="section-title">最近更新</h2>
      </div>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="学习资料" name="materials">
          <div class="material-list">
            <div v-for="(material, index) in recentMaterials" :key="index" class="material-item">
              <router-link :to="`/material/${material.id}`" class="material-link">
                <div class="material-icon">
                  <i :class="getMaterialIcon(material.type)"></i>
                </div>
                <div class="material-info">
                  <h3 class="title">{{ material.title }}</h3>
                  <div class="meta">
                    <span class="type">{{ material.type }}</span>
                    <span class="date">{{ material.updateTime }}</span>
                  </div>
                </div>
                <div class="material-action">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </router-link>
            </div>
          </div>
          <div class="view-more">
            <router-link to="/materials">查看全部学习资料</router-link>
          </div>
        </el-tab-pane>
        <el-tab-pane label="考试" name="exams">
          <div class="exam-list">
            <div v-for="(exam, index) in recentExams" :key="index" class="exam-item">
              <router-link :to="`/exam/${exam.id}`" class="exam-link">
                <div class="exam-info">
                  <h3 class="title">{{ exam.title }}</h3>
                  <div class="meta">
                    <span class="subject">{{ exam.subject }}</span>
                    <span class="time">{{ exam.examTime }}</span>
                  </div>
                  <div class="status" :class="getExamStatusClass(exam.status)">
                    {{ getExamStatusText(exam.status) }}
                  </div>
                </div>
                <div class="exam-action">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </router-link>
            </div>
          </div>
          <div class="view-more">
            <router-link to="/exams">查看全部考试</router-link>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: 'TeachingTools',
  data() {
    return {
      activeTab: 'materials',
      materialStats: {
        total: 0,
        newCount: 0
      },
      examStats: {
        upcoming: 0,
        completed: 0
      },
      recentMaterials: [],
      recentExams: []
    }
  },
  created() {
    this.fetchMaterialStats()
    this.fetchExamStats()
    this.fetchRecentMaterials()
    this.fetchRecentExams()
  },
  methods: {
    async fetchMaterialStats() {
      try {
        const response = await api.material.getMaterialStats()
        this.materialStats = response.data
      } catch (error) {
        console.error('获取学习资料统计失败:', error)
      }
    },
    async fetchExamStats() {
      try {
        const response = await api.exam.getExamStats()
        this.examStats = response.data
      } catch (error) {
        console.error('获取考试统计失败:', error)
      }
    },
    async fetchRecentMaterials() {
      try {
        const response = await api.material.getMaterialList({ page: 1, limit: 5, sort: 'updateTime' })
        this.recentMaterials = response.data.items
      } catch (error) {
        console.error('获取最近学习资料失败:', error)
      }
    },
    async fetchRecentExams() {
      try {
        const response = await api.exam.getExamList({ page: 1, limit: 5 })
        this.recentExams = response.data.items
      } catch (error) {
        console.error('获取最近考试失败:', error)
      }
    },
    getMaterialIcon(type) {
      const iconMap = {
        pdf: 'el-icon-document',
        doc: 'el-icon-document-word',
        ppt: 'el-icon-document-ppt',
        video: 'el-icon-video-camera'
      }
      return iconMap[type] || 'el-icon-document'
    },
    getExamStatusClass(status) {
      const classMap = {
        upcoming: 'status-upcoming',
        ongoing: 'status-ongoing',
        completed: 'status-completed',
        missed: 'status-missed'
      }
      return classMap[status] || ''
    },
    getExamStatusText(status) {
      const textMap = {
        upcoming: '即将开始',
        ongoing: '进行中',
        completed: '已完成',
        missed: '已错过'
      }
      return textMap[status] || '未知状态'
    }
  }
}
</script>

<style lang="scss" scoped>
.teaching-tools {
  padding: 20px;

  .page-header {
    text-align: center;
    margin-bottom: 30px;

    .page-title {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #303133;
    }

    .page-desc {
      font-size: 16px;
      color: #606266;
    }
  }

  .tools-section {
    margin-bottom: 40px;

    .tool-card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 30px;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s;
      cursor: pointer;
      margin-bottom: 20px;

      &:hover {
        transform: translateY(-5px);
      }

      .tool-icon {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 20px;
      }

      .tool-content {
        flex: 1;
        display: flex;
        flex-direction: column;

        .tool-title {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 15px;
          color: #303133;
        }

        .tool-desc {
          font-size: 16px;
          color: #606266;
          line-height: 1.6;
          margin-bottom: 20px;
          flex: 1;
        }

        .tool-stats {
          display: flex;
          margin-bottom: 20px;

          .stat-item {
            margin-right: 30px;
            text-align: center;

            .stat-value {
              display: block;
              font-size: 24px;
              font-weight: bold;
              color: #409EFF;
            }

            .stat-label {
              font-size: 14px;
              color: #909399;
            }
          }
        }
      }
    }
  }

  .recent-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .section-header {
      margin-bottom: 20px;

      .section-title {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
      }
    }

    .material-list {
      .material-item {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }

        .material-link {
          display: flex;
          align-items: center;
          padding: 15px;
          border-radius: 4px;
          text-decoration: none;
          color: inherit;
          transition: background-color 0.3s;

          &:hover {
            background-color: #f5f7fa;
          }

          .material-icon {
            font-size: 24px;
            color: #409EFF;
            margin-right: 15px;
          }

          .material-info {
            flex: 1;

            .title {
              font-size: 16px;
              margin: 0 0 5px;
              color: #303133;
            }

            .meta {
              font-size: 13px;
              color: #909399;

              .type {
                margin-right: 15px;
              }
            }
          }

          .material-action {
            color: #909399;
          }
        }
      }
    }

    .exam-list {
      .exam-item {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }

        .exam-link {
          display: flex;
          align-items: center;
          padding: 15px;
          border-radius: 4px;
          text-decoration: none;
          color: inherit;
          transition: background-color 0.3s;

          &:hover {
            background-color: #f5f7fa;
          }

          .exam-info {
            flex: 1;
            display: flex;
            align-items: center;

            .title {
              font-size: 16px;
              margin: 0;
              color: #303133;
              flex: 1;
            }

            .meta {
              font-size: 13px;
              color: #909399;
              margin: 0 20px;

              .subject {
                margin-right: 15px;
              }
            }

            .status {
              font-size: 13px;
              padding: 2px 8px;
              border-radius: 10px;

              &.status-upcoming {
                background-color: #e6f7ff;
                color: #1890ff;
              }

              &.status-ongoing {
                background-color: #f6ffed;
                color: #52c41a;
              }

              &.status-completed {
                background-color: #f5f5f5;
                color: #8c8c8c;
              }

              &.status-missed {
                background-color: #fff2f0;
                color: #f5222d;
              }
            }
          }

          .exam-action {
            color: #909399;
          }
        }
      }
    }

    .view-more {
      text-align: center;
      margin-top: 20px;

      a {
        color: #409EFF;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .teaching-tools {
    .tools-section {
      .tool-card {
        .tool-content {
          .tool-stats {
            flex-direction: column;

            .stat-item {
              margin-right: 0;
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .recent-section {
      .exam-list {
        .exam-item {
          .exam-link {
            .exam-info {
              flex-direction: column;
              align-items: flex-start;

              .title {
                margin-bottom: 5px;
              }

              .meta {
                margin: 5px 0;
              }

              .status {
                margin-top: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style> 